<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        .root{
            margin-top: 150px;
        }
        #errorHint{
            visibility: hidden;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 10px;
            font-size: 12px;
            width: 302px;
            height: 23px;
            line-height: 23px;
            padding-left: 40px;
            box-sizing: border-box;
            color: #E5383C;
            background-color: rgb(255,235,235);
            border: rgb(250,204,198) solid 1px;
            background-image: url("./static/jingdong-icons.png");
            overflow: clip;
            background-repeat: no-repeat;
            background-position: -94px -46px;
        }
        input{
            border: none;
            outline: none;
        }
        /*input:focus{*/
        /*    border: #BBBBBB solid 1px;*/
        /*}*/
        .nameC, .psdC{
            display: flex;
            border: #BBBBBB solid 1px;
            width: 300px;
            margin: auto;
            flex-direction: row-reverse;
        }
        .userIcon{
            background-image: url("./static/jingdong-icons.png");
            overflow: clip;
            width: 38px;
            height: 38px;
            background-position: left top;
            border-right:  #BBBBBB solid 1px;
            background-repeat: no-repeat;
        }
        .nameIn, .psdIn{
            width: 261px;
            border: none;
        }
        .nameIn:focus +.userIcon{
            background-image: url("./static/jingdong-icons.png");
            overflow: clip;
            background-position: 0px -48px;
            color: bisque;
        }

        .psdIn:focus +.psdIcon{
            background-image: url("./static/jingdong-icons.png");
            overflow: clip;
            background-position: -48px -48px;
            color: bisque;
        }

        .psdC{
            margin-top: 20px;
        }
        .psdIcon{
            background-image: url("./static/jingdong-icons.png");
            overflow: clip;
            width: 38px;
            height: 38px;
            border-right:  #BBBBBB solid 1px;
            background-position-x: -48px;
            background-repeat: no-repeat;
        }
        .submit{
            width: 300px;
            height: 34px;
            background-color: #E5383C;
            border: #C96361 solid 1px;
            color: white;
            margin-left: auto;
            margin-right: auto;
            margin-top: 30px;
        }
        .submit a{
            display: block;
            text-decoration: none;
            color: inherit;
            text-align: center;
            line-height: 34px;
        }
        .psdCError{
            border: #E5383C solid 1px;
        }
        .psdIconError{
            background-image: url("./static/jingdong-icons.png");
            overflow: clip;
            width: 38px;
            height: 38px;
            border-right:  #E5383C solid 1px;
            background-position: -48px -96px;
            background-repeat: no-repeat;
        }
        .nameIconError{
            background-image: url("./static/jingdong-icons.png");
            overflow: clip;
            width: 38px;
            height: 38px;
            border-right:  #E5383C solid 1px;
            background-position: 0px -96px;
            background-repeat: no-repeat;
        }
    </style>
    <script>
        function sendRequest(params, succ, error){
            const xhr = new XMLHttpRequest();
            xhr.open("post", "/TomcatDemo/LoginServlet");
            // post请求必须设置此头信息,告诉服务器是以表单形式提交数据 参数格式是 键值对的形式 用&隔开
            // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');
            // 告诉服务器是以json的形式提交数据
            xhr.setRequestHeader('Content-Type','application/json;charset=UTF-8');
            xhr.send(params);
            xhr.onreadystatechange = function () {
                if (this.readyState === 4) {
                    if (this.status >= 200 && this.status < 300) {
                        succ(this.responseText);
                    }else {
                        error(this.status, this.responseText);
                    }
                }
            }

        }

        function loadData(params){
            return new Promise((resolve, reject)=>{
                const xhr = new XMLHttpRequest();
                xhr.open("post", "/TomcatDemo/LoginServlet");
                // post请求必须设置此头信息,告诉服务器是以表单形式提交数据 参数格式是 键值对的形式 用&隔开
                // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');
                // 告诉服务器是以json的形式提交数据
                xhr.setRequestHeader('Content-Type','application/json;charset=UTF-8');
                xhr.send(params);
                xhr.onreadystatechange = function () {
                    if (this.readyState === 4) {
                        if (this.status >= 200 && this.status < 300) {
                            resolve(this.responseText);
                        }else {
                            reject(this.status);
                        }
                    }
                }
            })
        }


        window.onload = function () {
            let psdIn = document.getElementById("psdIn");
            let psdCID = document.getElementById("psdCID");
            let psdIconID = document.getElementById("psdIconID");
            psdIn.onblur = function () {
                // 判断密码框内是否有值,如果没有值需要有提示框
                let psdValue = psdIn.value;
                if (psdValue){
                    // 有值
                    psdCID.classList.remove("psdCError")
                    psdIconID.classList.remove("psdIconError")
                }else {
                    // 空值
                    console.log("密码空值");
                    psdCID.classList.add("psdCError")
                    psdIconID.classList.add("psdIconError")
                }
            }
            psdIn.onfocus = function () {
                psdCID.classList.remove("psdCError")
                psdIconID.classList.remove("psdIconError")
            }

            let nameC = document.getElementById("nameC");
            let nameIn = document.getElementById("nameIn");
            let userIcon = document.getElementById("userIcon");
            nameIn.onblur = function () {
                // 判断用户名框内是否有值,如果没有值需要有提示框
                let nameValue = nameIn.value;
                if (nameValue){
                    // 有值
                    console.log("123123")
                    nameC.classList.remove("psdCError")
                    userIcon.classList.remove("nameIconError")
                }else {
                    // 空值
                    console.log("密码空值");
                    nameC.classList.add("psdCError")
                    userIcon.classList.add("nameIconError")
                }
            }
            nameIn.onfocus = function () {
                nameC.classList.remove("psdCError")
                userIcon.classList.remove("nameIconError")
            }
            let errorHint = document.getElementById("errorHint");
            const elementById = document.getElementById("submit");
            elementById.onclick = function (){
                // 登录 ajax
                if (!nameIn.value){
                    // 用户名为空
                    errorHint.innerHTML = "请输入用户名"
                    errorHint.style.visibility = "visible";
                }else if (!psdIn.value){
                    errorHint.innerHTML = "请输入密码"
                    errorHint.style.visibility = "visible";
                }else {
                    errorHint.style.visibility = "hidden";
                    // 发送ajax请求到服务器实现登录
                    // let params = "user=" + nameIn.value+"&psd="+psdIn.value;
                    let params ={};
                    params.user=nameIn.value;
                    params.psd=psdIn.value;

                    aLoad(JSON.stringify(params))

                    // sendRequest(JSON.stringify(params), (data)=>{
                    //     let result = JSON.parse(data);
                    //     if (result.code === 200) {
                    //         //服务器处理成功
                    //         if (result.data.token) {
                    //             // 登录成功,跳转到首页
                    //             errorHint.style.visibility = "hidden";
                    //             psdCID.classList.remove("psdCError")
                    //             psdIconID.classList.remove("psdIconError")
                    //             nameC.classList.remove("psdCError")
                    //             userIcon.classList.remove("nameIconError")
                    //             window.location.href = "./index.jsp";
                    //         }else {
                    //             // token是空,登录失败,需要提醒用户
                    //             errorHint.innerHTML = result.msg;
                    //             errorHint.style.visibility = "visible";
                    //             psdCID.classList.add("psdCError")
                    //             psdIconID.classList.add("psdIconError")
                    //             nameC.classList.add("psdCError")
                    //             userIcon.classList.add("nameIconError")
                    //         }
                    //     }else {
                    //         // 服务器端报错,需要提醒用户
                    //         errorHint.innerHTML = result.msg;
                    //         errorHint.style.visibility = "visible";
                    //         psdCID.classList.add("psdCError")
                    //         psdIconID.classList.add("psdIconError")
                    //         nameC.classList.add("psdCError")
                    //         userIcon.classList.add("nameIconError")
                    //     }
                    // }, (code, msg)=>{
                    //     console.log("响应码:",code,msg)
                    // });
                }
            }


            async function aLoad(params){
                let data = await loadData(params);
                let result = JSON.parse(data);
                if (result.code === 200) {
                    //服务器处理成功
                    if (result.data.token) {
                        // 登录成功,跳转到首页
                        errorHint.style.visibility = "hidden";
                        psdCID.classList.remove("psdCError")
                        psdIconID.classList.remove("psdIconError")
                        nameC.classList.remove("psdCError")
                        userIcon.classList.remove("nameIconError")
                        console.log("登录成功======")
                        window.location.href = "./index.jsp";
                    }else {
                        // token是空,登录失败,需要提醒用户
                        errorHint.innerHTML = result.msg;
                        errorHint.style.visibility = "visible";
                        psdCID.classList.add("psdCError")
                        psdIconID.classList.add("psdIconError")
                        nameC.classList.add("psdCError")
                        userIcon.classList.add("nameIconError")
                    }
                }else {
                    // 服务器端报错,需要提醒用户
                    errorHint.innerHTML = result.msg;
                    errorHint.style.visibility = "visible";
                    psdCID.classList.add("psdCError")
                    psdIconID.classList.add("psdIconError")
                    nameC.classList.add("psdCError")
                    userIcon.classList.add("nameIconError")
                }
            }
        }
    </script>
</head>
<body>

<div class="root">
    <div id="errorHint">
    </div>

    <div id="nameC" class="nameC">
        <input id="nameIn" class="nameIn" type="text" autofocus placeholder="请输入用户名">
        <div id="userIcon" class="userIcon"></div>
    </div>

    <div id="psdCID" class="psdC">
        <input id="psdIn" class="psdIn" type="password" placeholder="请输入密码">
        <div id="psdIconID" class="psdIcon"></div>
    </div>

    <div id="submit" class="submit" ><a href="#">登录</a></div>
</div>
</body>
</html>